<template>
  <div class="echart-shape-sankey">
    <VsFormItem
      :label="$demoi18n('panel.label.nodeOrder')"
      :label-width="labelWidth"
    >
      <div class="echart-property-popup">
        <div class="rooter">
          <el-button
            icon="Tools"
            :link="true"
            type="primary"
            @click="openSankeyNodeOrderSetting()"
          >
            {{ $demoi18n('panel.btn.setting') }}
          </el-button>
        </div>
      </div>
    </VsFormItem>

    <FormItem
      :form="form"
      option="echart.series.width"
      :label="$demoi18n('panel.label.width')"
      type="number"
      serie-type="sankey"
      :show-unit="true"
      :show-switch="true"
      controls-position="right"
    />
    <FormItem
      :form="form"
      option="echart.series.itemStyle.opacity"
      :label="$demoi18n('panel.label.opacityPercent_1')"
      type="number"
      serie-type="sankey"
      :precision="2"
      :step="0.01"
    />
    <FormItem
      :form="form"
      option="echart.series.nodeWidth"
      :label="$demoi18n('panel.label.nodeWidth')"
      type="number"
      serie-type="sankey"
    />
    <FormItem
      :form="form"
      option="echart.series.nodeGap"
      :label="$demoi18n('panel.label.nodeInterval')"
      type="number"
      serie-type="sankey"
    />
    <FormItem
      :form="form"
      option="echart.series.orient"
      :label="$demoi18n('panel.label.nodeLayoutDirection')"
      type="select"
      :options="legendOrigents"
      serie-type="sankey"
    />
    <FormItem
      :form="form"
      option="echart.series.nodeAlign"
      :label="$demoi18n('panel.label.nodeAlignment')"
      type="select"
      :options="nodeAligns"
      serie-type="sankey"
    />
    <FormItem
      :form="form"
      option="echart.series.draggable"
      :label="$demoi18n('panel.label.nodeDragInteraction')"
      type="switch"
      serie-type="sankey"
    />
    <SankeyNodeOrderSetting
      ref="sankeyNodeOrderSetting"
      :form="form"
      :config="config"
    />
  </div>
</template>
<script>
import SankeyNodeOrderSetting from '@/components/common/sankey-node-order-setting/sankey-node-order-setting.vue';
import FormItem from '@/components/common/echart/form-item.vue';
import { legendOrigents, nodeAligns } from '@/components/common/echart/form-item-options.js';

export default {
  components: { FormItem, SankeyNodeOrderSetting },
  mixins: [],
  props: {
    form: Object,
    config: Object,
    labelWidth: {
      type: String,
      default: '75px',
    },
  },
  data() {
    return {
      legendOrigents,
      nodeAligns,
    };
  },
  computed: {},
  watch: {},
  methods: {
    openSankeyNodeOrderSetting() {
      this.$refs.sankeyNodeOrderSetting.openDialog();
    },
  },
};
</script>
<style lang="less" scoped>
.echart-property-popup {
  position: absolute;
  right: 0px;
}
</style>
